
<template>
<el-card>
    <my-search v-model="formInline" @search="doSearch">
        <el-form-item slot="time">
            <el-input  v-model="formInline.truename" placeholder="姓名" clearable></el-input>
        </el-form-item>
        <el-form-item slot="title">
            <dept-selector v-model="formInline.deptcode"  placeholder="所属部门"></dept-selector>
        </el-form-item>

  
        <div slot="dr" class="title_btns">
            <el-button   size="small" type="primary" icon="el-icon-check" @click="selDept">分配部门</el-button>
            <el-button  size="small" type="success" icon="el-icon-plus" @click="addPeople">添加人员</el-button>
        </div>
    </my-search>

    <my-table :data="form.tableData">
        <el-table-column prop="truename" label="姓名" sortable min-width="120"></el-table-column>
        <el-table-column prop="loginname" label="登录名" min-width="150">
            <template slot-scope="scope">
                {{scope.row.loginname}}

                <template v-if="scope.row.cacertname">
                    (
                        <i class="el-icon-lock"></i>
                        {{scope.row.cacertname}}
                    )
                </template>
            </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="120"></el-table-column>
        <el-table-column prop="deptname" label="所属部门" sortable min-width="150"></el-table-column>
        <el-table-column prop="addtime" label="添加时间" sortable min-width="160"></el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
            <template slot-scope="scope">
                <my-btn type="edit" @click="toEditRow(scope.row, 0)"></my-btn>
                <my-btn type="del" @click="handleDel(scope.row)"></my-btn>
                <my-btn type="edit" @click="resetPsw(scope.row)" v-if="showRePsg">重置密码</my-btn>

                <!-- <template v-if="!scope.row.cacertname">
                    <el-button type="text" icon="el-icon-lock" @click="bindCaHandler(scope.row)">绑定CA</el-button>
                </template>
                <template v-else>
                    <el-button type="text" icon="el-icon-unlock" @click="unBindCaHandler(scope.row)">解绑CA</el-button>
                </template> -->
            </template>
        </el-table-column>
    </my-table>
    <my-pagination
        ref="page"
        v-model="form.tableData"
        :action="$store.getters.sysUrl + '/user/list'"
        :search="pgQuery"
        :afterQuery="afterQuery">
    </my-pagination>

    <!-- 添加/编辑-->
    <my-dialog
        :title="formTitle"
        v-model="dialogAddVisible">
        <add ref="add" v-if="dialogAddVisible" @close="dialogAddVisible = false" :userid="editUserid"></add>
    </my-dialog>

    <!-- 分配部门 -->
    <my-dialog
        title="分配部门"
        v-model="dialogPeopleVisible">
        <people-dept ref="dept" v-if="dialogPeopleVisible" @close="dialogPeopleVisible = false"></people-dept>
    </my-dialog>

    <!-- <ca-bind ref="caBind" @bind="doSearch"></ca-bind> -->
</el-card>

</template>

<script>
import add from './add.vue'
import deptSelector from '../dept/component/dept-selector.vue'
import peopleDept from './people-dept.vue'
import caBind from './component/ca-bind'


export default {
    props:[],
    components:{add,deptSelector,peopleDept,caBind},
    data: function(){
        return{
            //搜索条件
            pgData: {
                title: '',
                cataname: '',

                sortname: '',
                sortorder: ''
            },
            form: {
                tableData: [],
            },

            dialogPeopleVisible: false,

            dialogAddVisible: false,
            editUserid: '',
            formTitle: '',

            //搜索栏
            formInline:{
                truename: '',
                deptcode: ''
            },
            editAllController: 0,//全部编辑控制器
        }
    }, 
    computed:{
        pgQuery: function(){
                return {
                pagesize: 10,
                sortname: this.pgData.sortname ? this.pgData.sortname : 'addtime',
                sortorder: this.pgData.sortorder ? this.pgData.sortorder : 'desc',

                title: this.formInline.truename,
                deptcode: this.formInline.deptcode
            }
        },
        listpath:{
            get:function(){
                return (this.reqtype&&this.reqtype=="register")?"/user/templist":"/user/list";
            }
        },
        deptpath:{
            get:function(){
                return (this.reqtype&&this.reqtype=="register")?"../user/people-dept.html?type=register":"../user/people-dept.html?";
            }
        },
        showRePsg: function() {
            return !/register/.test(window.location.href);
        }
    },
    watch:{
        dialogAddVisible: function(n, o){
            if(!n){
                this.$refs.page.reload();
            }
        },
        dialogPeopleVisible: function(n, o){
            if(!n){
                this.$refs.page.reload();
            }
        },
    },

    methods: {
        sortChange: function(sort){
            this.pgData.sortname = sort.prop
            this.pgData.sortorder = sortorder(sort.order)
            this.$refs.page.queryData()
        },
        doSearch: function(){
            this.$refs.page.queryData();
        },
        toEditRow: function(row){
            this.editUserid = row.userid;
            this.formTitle = '编辑人员';
            this.dialogAddVisible = true;
        },
        addPeople:function(){
            this.editUserid = '';
            this.formTitle = '添加人员';
            this.dialogAddVisible = true;
        },
        handleDel: function (row) {
            var that = this;

            if(!!row.userid){
                var url = (this.reqtype && this.reqtype == 'register') ? '/user/tempdel' : '/user/del'

                this.$post(this.$store.getters.sysUrl + url, {rowguid: row.userid}, function(data){
                    ShowMsg.call(this, '删除成功', 'success');
                    that.$refs.page.queryData();
                })
            }else{
                this.form.tableData.splice(this.form.tableData.indexOf(row), 1);
            }
        },

        selDept: function(){
            this.formUrl_prople = this.deptpath;
            this.dialogPeopleVisible = true;
        },
        resetPsw: function(row) {
            ShowConfirm.call(this, '密码将重置为“abc123”', 'info', function() {
                this.$post(this.$store.getters.sysUrl + '/user/resetpwd', {
                    rowguid: row.userid
                }, function(data, res) {
                    ShowMsg.call(this, res.msg);
                })
            }.bind(this))
        },
        afterQuery: function(row, data) {
            var one = (this.reqtype&&this.reqtype == "register") ? 1 : 0;
            this.total = Number(data.total) + one;
        },
        bindCaHandler(row) {
            this.$refs.caBind.setInfo(row.truename, row.userid);
            this.$refs.caBind.show();
        },
        unBindCaHandler(row) {
            this.$post(this.$store.getters.sysUrl + '/user/caunbind', {
                userid: row.userid
            }, (data, res) => {
                ShowMsg.call(this, res.msg);
                this.doSearch();
            })
        }

    },
    mounted() {

    }
}
</script>

<style scoped lang="scss">

.title_btns{
    float: right;
}
</style>
